<template>
	<view>
		<view class="user_box" style="width: 80%; margin: 40rpx auto;">
			<view class="user_for" v-for="(list,id) in Data" :key="id">
				<view class="line_box flex flex-column align-center">
					<!-- 圆球 -->
					<view class="line_radio bg-white" :style="{ 'border' : 'solid 6rpx #28a745'}"></view>
					<!-- 线 -->
					<view class="bg-success" style="width: 4rpx; height: 100%;"></view>
				</view>
				<view class="right_box" :style="{ 'color' :'#8e8b8d'}">
					<view class="title">
						<text class="text-success font-md font-weight-bold"> {{list.Company_History_Title}} </text>
					</view>
					<view class="text-dark font">
						<text>{{list.Company_History_Main}}</text>
					</view>
					<view class="desc">
						<text>于{{list.Company_History_Date}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import { getTableInquiry } from '@/api/global.js';
	export default {
		data() {
			return {
				Data:[],
				form: {
					Data: 'company_history',
					page: 1,
					limit: 999,
				},
			}
		},
		onLoad() {
			this.getData(this.form);
		},
		methods: {
			async getData(data) {
				const res = await getTableInquiry({
					data
				})
				if(res.Status == "success"){
					this.Data = res.tableData
				}
			},
		}
	}
</script>

<style scoped>
	.user_for {
		display: flex;
	}

	.item_year {
		font-size: 34rpx;
		height: 50rpx;
	}

	.line_for {
		width: 4rpx;
		height: 24rpx;
		margin: 0 20rpx 10rpx;
		background-color: #559DFF;
	}

	.line_radio {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		top: 0;
	}

	.right_box {
		padding: 0rpx 20rpx 20rpx 20rpx;
	}

	.desc {
		font-size: 30rpx;
		color: #8e8b8d;
		display: flex;
		margin-top: 20rpx;
		align-items: center;

	}
</style>